<style>
.fader {
  opacity: 0;
  display: none;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fader.in {
  opacity: 1;
  display: block;
}

.select2-container {
  display: block;
  width:90px;
}

.form-inline input {
  padding: 10px;
}

.select2-selection--multiple {
  height: 75px;
}

.delete-website {
  float: right;
  margin-top: 25px;
}

label {
  display: none;
}
</style>

<h1><%= @website.url %></h1>
<% if flash[:success] %><div class="bg-success fader in" style="padding:5px 5px"><h5><%= flash[:success] %></h5></div><% end %>
<% if flash[:error] %><div class="bg-warning fader in" style="padding:5px 5px"><h5><%= flash[:error] %></h5></div><% end %>

<div>
  <table id="table"  data-pagination="true" data-page-size="50" data-sort-name="name" data-sort-order="desc" data-toolbar="#create-keyword" data-show-refresh="false" data-show-columns="true" data-search="true" class="table-striped">
    <thead>
      <tr>
        <th></th>
        <% @attributes.each do |attribute| %>
        <th data-field="<%= attribute %>" data-sortable="true"><%= attribute.to_s.humanize %></th>
        <% end %>
      </tr>
    </thead>
    <tbody>
      <% @keywords.each do |keyword| %>
      <tr data-index="<%= keyword.id %>">

        <td class="bs-checkbox" data-index="<%= keyword.id %>"><label for="keyword_<%= keyword.id %>"><%= keyword.phrase %></label><input data-index='' data-id="<%= keyword.id %>" name="keyword" type="checkbox" id="keyword_<%= keyword.id %>"></td>


        <% @attributes.each do |attribute| %>
        <td><%= keyword.send(attribute) %></td>
        <% end %>
      </tr>
      <% end %>
    </tbody>
  </table>

  <button type="button" class="btn btn-danger delete-website" id="delete-website-button" data-toggle="modal" data-target="#confirm-website-delete">Delete Website
  </button>
</div>
</div>



<script>
$( document ).ready(function() {

  $(document).on('change', 'input:checkbox', function() {
    if($('input[type="checkbox"][name="keyword"]:checked').val()) {
      $('#delete-keyword-button').attr('disabled', false);
    } else {
      $('#delete-keyword-button').attr('disabled', true);
    }
  });

  $('#refresh-button').on('click', function(){
    window.location.reload();
  })


  $(function () {
    $('#table').bootstrapTable({
// data: data
});
  });

  function hideAlert() {
    $(".fader.in").removeClass("in");
  }

  window.setTimeout(function () {
    hideAlert();
  }, 5000);


  function selectedIds() {
    return $('input[type="checkbox"][name="keyword"]:checked').map(function(){
      return $(this).data('id');
    }).get();
  }

  function deleteURL(){
    return '/serpscan/keywords/delete?ids=' + selectedIds()
  }

  $('#confirm-delete').on('show.bs.modal', function(e) {


    var deleteLink = $(e.relatedTarget).data('href') + '?ids=' + selectedIds;
    $(document).find('#confirm-delete .btn-ok').attr('href', deleteLink);
  });

  $('#confirm-delete .btn-ok').on('click', function(){
    $(document).find('#confirm-delete .btn-ok').attr('href', deleteURL);
  });

  $(".js-example-basic-multiple").select2();

});

</script>


<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">Delete selected keywords?</h4>
      </div>
      <div class="modal-body">
        All ranking history will be lost.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a class="btn btn-danger btn-ok">Delete</a>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="confirm-website-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">Delete website and all keywords?</h4>
      </div>
      <div class="modal-body">
        All keywords and ranking history will be lost.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <a href="/serpscan/websites/<%= @website.id %>/delete" class="btn btn-danger btn-ok">Delete</a>
      </div>
    </div>
  </div>
</div>

<div id="create-keyword">
  <button type="button" class="btn btn-default" data-toggle="modal" data-target="#new_keyword_modal" id='new_keyword'>
    <i class="glyphicon glyphicon-plus"></i>
  </button> 

  <label for="delete-keyword-button">Delete Selected Keywords</label>
  <button type="button" class="btn btn-default" id="delete-keyword-button" data-toggle="modal" data-target="#confirm-delete">
    <i class="glyphicon glyphicon-minus"></i>
  </button>

  <button type="button" class="btn btn-default" id="refresh-button">
    <i class="glyphicon glyphicon-refresh"></i>
  </button>
</div>

<div class="modal fade" id="new_keyword_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">New Keyword</h4>
      </div>
      <div class="modal-body">

        <form class="form-inline" action="/serpscan/<%= @website.id %>/keyword" method="post" id="create-keyword" >
          <label for="keyword" class="control-label">Keyword:</label>
          <input type="text" class="form-control" name="keyword" placeholder="Keyword" style="width:100%">

          <label for="search_engines" class="control-label">Search Engines:</label><br/>
          <select class="js-example-basic-multiple search_engines" multiple="multiple" name="search_engines">
            <% @search_engines.each do |search_engine| %>
              <optgroup label="<%= search_engine.title %>">
                <% search_engine.countries.each do |country| %>
                  <option value="<%= country.id %>" <% if country.default %>selected="selected"<% end %>><%= "#{search_engine.title} | #{country.location}" %></option>
                <% end %>
              </optgroup>
            <% end %>
          </select>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Create</button>
        </div>
      </form>
    </div>
  </div>
</div>